<template>
  <common-echart :pos="pos" :option="option" @getMychart="getMychart" width="320" height="180"></common-echart>
</template>

<script setup>
  import { reactive, computed, ref, onMounted, nextTick, getCurrentInstance } from 'vue'
  import commonEchart from '@/components/commonEchart.vue'
  const { appContext : { config: { globalProperties } } } = getCurrentInstance()
  const echarts = globalProperties.$echarts
  const { pos } = defineProps({
    pos: {
      type: String,
      required: true
    }
  })
  let myChart = ref({})
  // 定义 data
  let data = reactive({
    myColor: ['#41fff9', '#41a0ff'],
    dataList1: [110, 170, 200,220,270,250,468,200,50,70,200,100],
    dataList2: [90, 100, 110,200,210,320,225,120,100,90,130,180],
    dataTitle: ['6月', '7月', '8月','9月', '10月', '11月','12月', '1月', '2月','3月', '4月', '5月'],
    dataSeries: [],
    resObj: {},
  })
    // 1.1 从接口获取数据
  const getData = async() => {
    const {data: data0} = await getPopulationTotal()
    // console.log(data0);
    if(data0.code != 200){
      return 
    }

    // 1.1.1 获取真实数据data0以后，把data0数据push到data中
    data.dataList1 = []
    data0.data.age.forEach((item, index) => {
      data.dataList1.push(item)
    })
    // 1.1.2 进一步加工
    dealData(data)
  }
  // 1.2 二次加工并更新图表
  const dealData = (data) => {
    data.dataList1.forEach((item, index) => {
      data.dataSeries.push({
        value: item,
        name: data.dataTitle[index],
      })
    })
    for (let i in data.dataSeries) {
      data.resObj[data.dataSeries[i]["name"]] = data.dataSeries[i];
    }
    
    // 更新图表数据
    fresh(data)
  }

  // 定义图表编辑项 option
  let option = reactive({})
  const getOption = (data) =>{
    return {
      color: data.myColor,
      tooltip: {
        trigger: 'axis',
        backgroundColor: "#0a1825",
        borderColor: "#0a1825",
        axisPointer: {
            type: 'line',
        },
        formatter: function(params){
          var str = `${params[0].name}<br /><span style=font-size:14px>获取积分</span> <span style=color:#41fff9;font-size:14;font-weight:bold>${params[0] ? params[0].data : ''}亿元</span>
          <br /><span style=font-size:14px>兑换积分</span> <span style=color:#41a0ff;font-size:14;font-weight:bold>${params[1]? params[1].data : ''}亿元</span>`
          return str
          
        },
        textStyle: {
          color: "#FFFFFF",
          fontSize:12
        },
      },
      legend: {
        show: true,
        icon: "roundRect",
          textStyle: {
              color: "#ffffff",
            fontSize:15
        },
        right: "10",
        itemWidth:13,
        itemHeight:5
      },
      grid: {
        left: '0%',
        right: '0%',
        top: '25%',
        width: "100%",
        height: '70%',
        containLabel: true
      },
      xAxis: [{
        type: 'category',
        boundaryGap: false,
        
        axisLine: { //坐标轴轴线相关设置。数学上的x轴
          show: true,
          lineStyle: {
            color: '#80878a'
          },
        },
        axisLabel: { //坐标轴刻度标签的相关设置
          show:true,
          interval:0,
          textStyle: {
            color: '#ffffff',
            fontSize:13
          },
        },
        axisTick: {
          show: false,
        },
        // data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"]
        data: data.dataTitle
      }],
      yAxis: [{
        // interval:150,
        name: "单位：分",
        nameTextStyle: {
              color: "#80878a",
            fontSize:15
            },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#80878a',
            type: "dashed"
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#80878a"
          }

        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#80878a',
            fontSize:15
          },
        },
        axisTick: {
          show: false,
        },
      }],
      series: [{
        type: 'line',
        name:'获取',
        symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
        showAllSymbol: true,
        symbolSize: 0,
        smooth: true,
        lineStyle: {
          normal: {
            color: "#41fff9", // 线条颜色
          },
          borderColor: 'rgba(0,0,0,.4)',
        },
        areaStyle: { //区域填充样式
          normal: {
            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: "rgba(65, 255, 249, 1)"
              },
              {
                offset: 1,
                color: "rgba(44, 119, 194, 0)"
              }
            ], false),
            // shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
            shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
          }
        },
        data:data.dataList1
      },{
        type: 'line',
        name:'兑换',
        symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
        showAllSymbol: true,
        symbolSize: 0,
        smooth: true,
        lineStyle: {
          normal: {
            color: "#41a0ff", // 线条颜色
          },
          borderColor: 'rgba(0,0,0,.4)',
        },
        areaStyle: { //区域填充样式
          normal: {
            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: "rgba(65, 160, 255, 1)"
              },
              {
                offset: 1,
                color: "rgba(44, 119, 194, 0)"
              }
            ], false),
            // shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
            shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
          }
        },
        data:data.dataList2
      }]
    }
  }

  // 3. 得到mychart实例并暴露出去，处理进一步交互
  let getMychart = ([myChart_0, id]) => {
    myChart.value = myChart_0

  }

  // setOption 这里不需要修改
  let fresh = (data) => {
    nextTick(() => {
      // 处理好data后，拿去生成option
      option = getOption(data)
      myChart.value.setOption(option)
    })
  }

  onMounted(()=> {
    // 1. 若接入了数据，运行
    // getData()

    // 2. 若没有接入数据，运行
    dealData(data)
  })

</script>

<style lang="scss" scoped></style>